<template>
    <div class="data-table">
        <form-layout
            class="data-form"
            ref="data_form"
            :form="form"
            :config="config"
        >
            <template slot="footer" slot-scope="scope">
                <div class="data-form-info-btn">
                    <el-button type="primary" @click.stop.native="onSubmit(scope)">搜索</el-button>
                    <el-button type="primary" plain 
                        @click.stop.native="onReset(scope)"
                    >重置</el-button>
                </div>
            </template>
        </form-layout>
        <div class="data-table-btnlist">
        </div>
        <div class="data-table-table">
            <pagination-table
                :list="list"
                :options="options"
                :columns="columns"
                :pagination="pagination"
                :get-list="getList"
            />
        </div>
    </div>
</template>

<script>
// 获取列表接口
import { Report_List } from '@/server/materialTestReportManage'

export default {
    data() {
        return {
            form: {
                reportCode: ''
            },
            config: {
                labelWidth: '120px',
                fieldsConfig: [{
                    cols: 6,
                    name: 'reportCode',
                    label: '报告单编号：',
                    size: 'medium',
                    placeholder: '请输入报告单编号',
                    clearable: true
                }, {
                    cols: 6,
                    size: 'medium',
                    slot: 'footer'
                }]
            },
            list: [],
            columns: [
                {
                    prop: "reportCode",
                    label: "报告单编号",
                },
                {
                    prop: "任务单编号",
                    label: "任务单编号",
                },
                {
                    width: 100,
                    prop: "sampleStatus",
                    label: "样品状态",
                },
                {
                    width: 100,
                    prop: "variety",
                    label: "品种",
                },
                {
                    width: 80,
                    prop: "entrustCode",
                    label: "委托编号",
                },
                {
                    prop: "entrustUnit",
                    label: "委托单位",
                },
                {
                    prop: "entrustUser",
                    label: "委托人",
                },
                {
                    prop: "entrustDate",
                    label: "委托日期",
                },
                {
                    prop: "detectionDate",
                    label: "检测日期",
                },
                {
                    width: 100,
                    label: "附件",
                    render: (h, params) => {
                        return (
                            <div class="data-table-qr-code">
                                <svg-icon name="attachment"  onClick={this.onClickAttachment.bind(this,params.row)}/>    
                            </div>
                        )
                    },
                },
            ],
            options: {
                index: false,
                initTable: true,
                border: false,
                selection: false,
                mutiSelect: false,
                headerCellStyle: {
                    backgroundColor: "#E8F3FF",
                    color: "#3D4256 ",
                },
            },
            pagination: {
                show: true,
                total: 0,
                currentPage: 1,
                pageSize: 15,
            }
        };
    },
    methods: {
        // 重置按钮
        onReset(scope) {
            // 表单重置
            scope.rf()
            // 查询列表
            this.getList()
        },
        // 搜索按钮
        onSubmit(scope) {
            if (scope.sf()) {
                this.getList()
            }
        },
        // 附件点击
        onClickAttachment(row, event) {
            // 阻止事件冒泡 - 避免再次确认undefined
            event && event.stopPropagation()
            // 下载报告单
            row['reportFilePath'] && window.open(row['reportFilePath'])
        },
        async getList() {    
            // 列表loading
            this.options.loading = true
            // 获取列表
            let params = {
                reportCode: this.form['reportCode'],
                pageNum: this.pagination['currentPage'],
                pageSize: this.pagination['pageSize']
            }
            for( let key in params ) {
                if( params[key] === '' ) {
                    delete params[key]
                }
            }
            let data = await Report_List(params)
            // 总条数
            this.pagination['total'] = data['total']
            // 列表数据
            this.list = data['rows']
            // 结束loading
            this.options.loading = false
        }
    },
};
</script>

<style lang="scss" scoped>
.data-table {
    padding: 5px 0;
    overflow: hidden;
    &-btnlist {
        margin-top: 28px;
        width: 100%;
    }
    &-table {
        color: #fff;
    }
    ::v-deep .data-table-qr-code {
        font-size: 18px;
        color: rgba(102, 177, 255, 1);
        cursor: pointer;
        &:hover {
            color: rgba(102, 177, 255, 0.8);
        }
    }
    ::v-deep .btn-text {
        color: #fff;
        .el-button--text {
            &:nth-of-type(2) {
                color: #e6a23c;
                &:hover {
                    color: #ebb563;
                }
            }
        }
        .el-popover__reference-wrapper {
            margin-left: 10px;
            .el-button--text {
                color: #f56c6c;
                &:hover {
                    color: #f78989;
                }
            }
        }
    }
}
</style>
